<template>
  <div class="custome-transfer">
    <span class="trans-title">{{ $t('角色权限') }}</span>
    <el-row>
      <el-col :span="11">
        <span class="trans-col-title">{{ $t('已授予权限') }}</span>
        <list
          ref="leftTable"
          class="left"
          :list-data="dataleft"
          :has-select="true"
          :list-cols="columns"
          :action-opts="actionOpts"
          :highlight="true"
          :table-tag="leftTableName"
          :init-cols-props.sync="initColsProps"
          height="400px"
          :init-headmune-flag="initHeadmuneFlag"
          @sort="handleSort"
          @cell-double-click="handleLeftDoubleClick"
          @selection-change="handleLeftSelectionChange"
@init-table="initTable"
        ></list>
      </el-col>
      <el-col :span="2">
        <el-col class="transfer-guide">
          <el-tooltip
            :content="$t('授予当前选中的可用权限')"
            effect="dark"
            placement="bottom"
          >
            <el-button size="small" class="caretbtn" @click="right_move()">
              <i class="iconfont icon-zuo" style="font-size: 12px"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            :content="$t('撤销当前选中的持有权限')"
            effect="dark"
            placement="bottom"
          >
            <el-button size="small" class="caretbtn" @click="left_move()">
              <i
                class="iconfont icon-ico_arrows_packup"
                 style="font-size: 12px"
              ></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            :content="$t('授予当前角色全部可用权限')"
            effect="dark"
            placement="bottom"
          >
            <el-button
              size="small"
              class="caretbtn"
              @click="right_all_move()"
            >
              <i class="iconfont icon-zuoshuangjiantou" style="font-size: 16px"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            :content="$t('撤销当前选中的所有权限')"
            effect="dark"
            placement="bottom"
          >
            <el-button size="small" class="caretbtn" @click="left_all_move()">
              <i class="iconfont icon-youshuangjiantou" style="font-size: 16px"></i>
            </el-button>
          </el-tooltip>

          <!-- <i class="el-icon-caret-right" @click="left_move()"></i>
          <i class="el-icon-d-arrow-right" @click="left_all_move()"></i>
          <i class="el-icon-caret-left" @click="right_move()"></i>
          <i class="el-icon-d-arrow-left" @click="right_all_move()"></i>-->
        </el-col>
      </el-col>
      <el-col :span="11">
        <span class="trans-col-title">{{ $t('可授予权限') }}</span>
        <list
          ref="rightTable"
          class="right"
          :table-tag="leftTableName"
          :list-data="dataright"
          :has-select="true"
          :list-cols="columns"
          :highlight="true"
          :action-opts="actionOpts"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          height="400px"
          @sort="handleSort"
          @cell-double-click="handleRightDoubleClick"
          @selection-change="handleRightSelectionChange"
          @init-table="initTable"
        ></list>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import List from '@/components/List'
export default {
  name: 'CustomTransfer',
  components: {
    List,
  },
  props: ['dataleft', 'dataright', 'columns'],
  data() {
    return {
      leftTableName:'actorLeft',
      rightTableName:'actorRight',
      check_val_left: [],
      check_val_right: [],
      currentRow: null,
      initHeadmuneFlag:false,
      defaultCheckedKeys: [],
      contextMenuData: [],
      initColsProps: ['resourceName', 'parentName', 'operation'],
      actionOpts: {
        show: false,
      },
    }
  },
  computed: {
    dataAuthed: {
      get() {
        return this.dataleft
      },
      set(array) {},
    },
    dataUnAuth: {
      get() {
        return this.dataright
      },
      set(array) {},
    },
  },
  methods: {
    initTable(config) {
      this.initHeadmuneFlag = true
    },
    left_move() {
      if (this.check_val_left && this.check_val_left.length > 0) {
        //要把这个数组排序
        //执行代码
        console.log('left_move ---',this.check_val_left)
  
        //将dataleft对应索引的数据移动到右边去
        this.check_val_left.forEach(element => {
            this.dataUnAuth.push(element)
        //console.log(this.data_left);
        this.dataAuthed.splice(this.dataAuthed.indexOf(element), 1)
        });
      
        console.log('dataleft对应索引的数据移动到右边去' + this.check_val_left)
        this.check_val_left = []
        this.$refs.leftTable.clearSelection()
        this.dataUnAuth = sortByKey(this.dataUnAuth,'code')
      } else {
        // this.$alaert('提示','请选中具体权限')
      }
    },
    right_move() {
      if (
        this.check_val_right &&
        this.check_val_right.length > 0
      ) {
        console.log('right_move -----' + this.check_val_right.resourceName)
        //将dataright对应索引的数据移动到左边去
        // console.log(item, index, array);
        this.check_val_right.forEach(element => {
           this.dataAuthed.push(element)
        this.dataUnAuth.splice(this.dataUnAuth.indexOf(element), 1)
        console.log(
          '将dataright对应索引的数据移动到左边去' + this.check_val_right
        )
        });
        this.check_val_right = []
        this.$refs.rightTable.clearSelection()
        this.dataAuthed = sortByKey(this.dataAuthed,'code')
      }
    },
    left_all_move() {
      this.dataAuthed.forEach((element) => {
        this.dataUnAuth.push(element)
      })
      this.dataUnAuth = sortByKey(this.dataUnAuth,'code')
      this.$emit('update:dataleft', [])
      this.$emit('update:dataright', this.dataUnAuth)
    },
    right_all_move() {
      this.dataUnAuth.forEach((element) => {
        this.dataAuthed.push(element)
      })
       this.dataAuthed = sortByKey(this.dataAuthed,'code')
      this.$emit('update:dataright', [])
      this.$emit('update:dataleft', this.dataAuthed)
    },
    handleLeftSelectionChange(val) {
      this.check_val_left = []
      this.check_val_left = val
    },
    handleRightSelectionChange(val) {
      this.check_val_right = []
      this.check_val_right = val
    },
    handleLeftDoubleClick(row, column, cell, event) {
      this.$refs.leftTable.clearSelection()
      this.check_val_left.push(row)
      this.left_move()
    },
    handleRightDoubleClick(row, column, cell, event) {
      this.$refs.rightTable.clearSelection()
      this.check_val_right.push(row)
      this.right_move()
    },
    //-------------------------------
    handleSort(sortInfo) {
      console.log('sortInfo----', sortInfo)
    },
    handleFilter(filterInfo) {
      console.log('filterInfo----', filterInfo)
    },
  },
}
// 数组对象方法排序：
function sortByKey(array, key) {
  return array.sort(function (a, b) {
    var x = a[key]
    var y = b[key]
    return x < y ? -1 : x < y ? 1 : 0
  })
}
</script>
<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.trans-table-header {
  height: 48px;
  padding: 15px;
  border: 1px solid $bg-e9;
}
.trans-title {
  position: relative;
  top: -5px;
  background: $bg-ff;
  padding: 0;
  color:#202020;
}
.list {
  margin-top: 15px;
}
.el-col{
  margin-top: 0px !important;
}
.el-col {
  margin-top: 10px;
  padding: 0;
  overflow-x: hidden;
}
.trans-col-title {
  font-size: $font-size;
}
.custome-transfer {
  width: 100%;
  border: 1px solid $bg-e9;
  padding: 15px 15px 0 15px;
  .transfer-guide {
    flex-direction: column;
    display: flex;
    height: 450px;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 30px;

    .el-button + .el-button {
        margin-left: 0;
        margin-top: 10px;
      }
  }
  .transfer-guide i {
    margin: 20px 0;
    background-size: 100%;
  }
}

.el-icon-caret-right,
.el-icon-caret-left {
  display: block;
}

.el-button {
  margin-left: 0;
}

.iconfont {
  padding-right: 0;
}
.el-button--small{min-width: 40px;}
</style>